import React, { Component, useMemo, useState } from "react";
import { View, Image, Text, Input, Picker } from "@tarojs/components";
import Taro from "@tarojs/taro";

import styles from "./index.module.scss";
import cn from "@/utils/classnames";
import API from "@/api";
import useThrottleFn from "ahooks/lib/useThrottleFn";
import { regs } from "@/utils/reg";
import { checkInput } from "@/utils/checkInput";
import { AtMessage } from "taro-ui";
import { useCodeCountDown } from "@/hooks/codeCountDown";
export default function() {
  let [loginInfo, setLoginInfo] = useState({
    phone: "",
    code: "",
  });
  let [step, setStep] = useState(1);
  let codeDown = useCodeCountDown({});
  let checker = checkInput(
    loginInfo,
    {
      phone: [
        {
          msg: "请输入手机号",
          test: regs.isNone,
        },
        {
          msg: "手机号错误",
          test: regs.isPhone,
        },
      ],
      code: [
        {
          msg: "请输入验证码",
          test: regs.isNone,
        },
        {
          msg: "验证码错误",
          test: regs.isCode,
        },
      ],
    },
    msg => {
      Taro.atMessage({
        message: msg,
        type: "error",
      });
    },
  );
  type Info = typeof loginInfo;
  function change(key: keyof Info) {
    return e => {
      setLoginInfo({
        ...loginInfo,
        [key]: e.detail.value,
      });
    };
  }
  let { run } = useThrottleFn(e => {
    if (e.detail.errMsg.includes("fail")) {
      Taro.showToast({
        title: "获取授权失败",
        icon: "none",
      });
    } else {
    }
    let { userInfo } = e.detail;
    API.Login.officialLogin({
      headUrl: userInfo.avatarUrl,
      nickname: userInfo.nickName,
      sex: userInfo.gender,
    });
  });
  let inputRight = checker(["phone", "code"], false);
  return (
    <View className={cn(styles.page, "page")}>
      {step === 0 && (
        <View>
          <Image
            className={styles.logo}
            src="http://qihs5ygb9.hb-bkt.clouddn.com/mini/%E7%BC%96%E7%BB%84%203_slices/%E7%BC%96%E7%BB%84%203@2x.png"
          ></Image>
          <View>
            <View className={styles.inputWrap}>
              <Text className={styles.quhao}>+86</Text>
              <Input
                value={loginInfo.phone}
                onInput={change("phone")}
                className={"flex-1"}
                placeholder="请输入手机号"
                maxlength={11}
                type="number"
              ></Input>
            </View>
            <View className={styles.inputWrap}>
              <Input
                value={loginInfo.code}
                onInput={change("code")}
                className={styles.codeInput}
                placeholder="请输入验证码"
                maxlength={6}
                type="number"
              ></Input>
              <View className={styles.line}></View>
              <Text
                className={styles.code}
                onClick={() => {
                  if (checker(["phone"])) {
                    codeDown.run();
                  }
                }}
              >
                {codeDown.text}
              </Text>
            </View>
          </View>
          <View
            className={cn(styles.btn, {
              [styles.active]: inputRight,
            })}
            onClick={() => {
              if (checker(["phone", "code"])) {
              }
            }}
          >
            登录
          </View>
        </View>
      )}
      {step === 1 && (
        <View>
          <Image
            className={styles.avatar}
            src={"http://img4.imgtn.bdimg.com/it/u=542014508,3272446844&fm=26&gp=0.jpg"}
          ></Image>
          <Picker mode="region" value={[]}>
            <View className={styles.selectWrap}>
              <View className={styles.selectRight}>省份</View>
              <View className={styles.selectLeft}>请选择</View>
              <Image
                src="http://qihs5ygb9.hb-bkt.clouddn.com/mini/Icons%EF%BC%8F24px%EF%BC%8Fface-detection%20Copy@2x.png"
                className={styles.selectIcon}
              ></Image>
            </View>
          </Picker>
          <View className={cn(styles.selectWrap, styles.mb)}>
            <View className={styles.selectRight}>科类</View>
            <View className={styles.selectLeft}>请选择</View>
            <Image
              src="http://qihs5ygb9.hb-bkt.clouddn.com/mini/Icons%EF%BC%8F24px%EF%BC%8Fface-detection%20Copy@2x.png"
              className={styles.selectIcon}
            ></Image>
          </View>
          <View
            className={cn(styles.btn, {
              [styles.active]: inputRight,
            })}
          >
            开始体验
          </View>
        </View>
      )}
      <AtMessage />
    </View>
  );
}
